import React from 'react';
import './LogIn.css';
import store from './store';
import { Link } from 'react-router-dom';
import { handleSubmitAction } from './store/actionCreators'
class LogIn extends React.Component{
    constructor(props){
        super(props)
        this.state=store.getState();
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleStoreChange=this.handleStoreChange.bind(this);
        store.subscribe(this.handleStoreChange);
    }
    handleSubmit(event){
        // const action={
        //     type:SUBMIT,
        //     value:{
        //           username: this.nameInput.value,
        //           pwd: this.pwdInput.value
        //           }
        // }
        const action = handleSubmitAction({
            username: this.nameInput.value,
            pwd: this.pwdInput.value
            });
            localStorage.setItem('user', this.nameInput.value);
            localStorage.setItem('pwd', this.pwdInput.value);
        store.dispatch(action);
    }
    handleStoreChange(){
        this.setState(store.getState());
    }
    render(){
        return(
        <div className="LogIN">
            
         <form action="/test" onSubmit={this.handleSubmit} >
         <h2>LogIN</h2>
            <label htmlFor="user">用户名：</label>
            <input type="text" id="user" ref={input => this.nameInput=input} />
            <br></br>
            <label htmlFor="pwd">密码：</label>
            <input type="password" id="pwd" ref={input => this.pwdInput=input} />
            <br></br>
            <a href="#">Forgot Password?</a>
            <br></br>
            <Link to='/home'>
            <input className="btn" type="submit" value="登录" onClick={this.handleSubmit}/></Link>
         </form>
        </div>
        )
    }
}
export default LogIn;